﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        .li_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
            float: left;
        }

        .ul_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
        }

        #content > tr {
            cursor: pointer
        }
    </style>
</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
                <table style="width: 80%">
                    <tr>
                        <td>
                            <span>
                                <input style="margin-top: 0px;width: 85%" autocomplete="off" type="text" name="imei"
                                       value="" placeholder="设备号" id="nav-search-input"/>
                            </span>
                        </td>
                        <td>
                            <span>
                                <input class="span10 date-picker" name="startTime" id="startTime" type="text"
                                       data-date-format="yyyy-mm-dd" readonly="readonly"
                                       style="width:150px;display: table-cell;font-size: 12px;float: left"
                                       placeholder="开始日期" title="开始日期"/>
                                <input class="span10 date-picker" name="endTime" id="endTime" type="text"
                                       data-date-format="yyyy-mm-dd" readonly="readonly"
                                       style="width:150px;display: table-cell;font-size: 12px;float:left;"
                                       placeholder="结束日期" title="结束日期"/>
                            </span>
                        </td>
                        <td style="vertical-align:top;">
                            <button class="btn btn-mini btn-light" type="button" onclick="search();" title="检索">
                                轨迹搜索
                            </button>
                        </td>
                        <td style="vertical-align:top;float: right">
                            <button class="btn btn-mini btn-light" type="button" id="start" title="轨迹回放">
                                轨迹回放
                            </button>
                            <button class="btn btn-mini btn-light" type="button" id="pause" title="停止回放"
                                    style="display: none">
                                停止回放
                            </button>
                            <button class="btn btn-mini btn-light" type="button" id="resume" title="继续回放"
                                    style="display: none">
                                继续回放
                            </button>
                        </td>
                    </tr>
                </table>
                <div id="container" style="width: 70%; height: 600px;float: left">

                </div>
                <div style="width: 28%; height: 600px;margin-left: 5px;float: left ">
                    <div style="height: 300px;overflow-y: scroll;">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>分段名</th>
                                <th>日期</th>
                                <th>轨迹数量</th>
                            </tr>
                            </thead>
                            <tbody id="content">

                            </tbody>
                        </table>
                    </div>
                    <div style="height: 300px;overflow-y: scroll;">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>地址名</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody id="contentItem">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
<script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "830498a4c3fe10c83685c7ee556e2554",
    };
</script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=8634cfb89333cba8c8b73b8cb4447b16"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

<script type="text/javascript">
    $(function () {
        top.hangge();
        //日期框
        $('.date-picker').datepicker({autoclose: true});
    });

</script>

<script type="text/javascript">
    var dataMap, map, lists, marker, lineArr = [];

    //进入页面初始化
    init('${lon}', '${lat}');

    function init(lon, lat) {
        map = new AMap.Map("container", {
            resizeEnable: true,
            center: [lon, lat],
            zoom: 17
        });
        marker = new AMap.Marker({
            map: map,
            position: [lon, lat],
            icon: "http://juhuo.static.iot08.com/static/common/show_location.png",
            offset: new AMap.Pixel(0, 0),
            autoRotation: true
        });
        lineArr.push(new AMap.LngLat(lon, lat));
        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            strokeColor: "#00A",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 3      //线宽
            // strokeStyle: "solid"  //线样式
        });
        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#F00",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 3      //线宽
            // strokeStyle: "solid"  //线样式
        });
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

        marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
            console.log(e)
        });
        map.setFitView();
    }


    AMap.event.addDomListener(document.getElementById('start'), 'click', function () {
        if (!dataMap || JSON.stringify(dataMap) === "{}") {
            alert("请先输入设备号搜索轨迹")
            return false;
        }
        if (!lineArr || lineArr.length === 0) {
            alert("请选择要播放的日期")
            return false;
        }
        marker.moveAlong(lineArr, 5000);
        $("#start").css("display", "none")
        $("#pause").css("display", "block")
        $("#resume").css("display", "none")
    }, false);
    AMap.event.addDomListener(document.getElementById('pause'), 'click', function () {
        marker.pauseMove();
        $("#start").css("display", "none")
        $("#pause").css("display", "none")
        $("#resume").css("display", "block")
    }, false);
    AMap.event.addDomListener(document.getElementById('resume'), 'click', function () {
        marker.resumeMove();
        $("#start").css("display", "none")
        $("#pause").css("display", "block")
        $("#resume").css("display", "none")
    }, false);

    /*AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
        marker.stopMove();
    }, false);*/

    function search() {
        var imei = $('#nav-search-input').val();
        if (imei == '') {
            $("#nav-search-input").tips({
                side: 3,
                msg: '请输入设备号',
                bg: '#AE81FF',
                time: 2
            });
            $("#nav-search-input").focus();
            return false;
        }
        var start = $('#startTime').val();
        var end = $('#endTime').val();
        if (end != "" && start != "") {
            if (new Date(start).getTime() > new Date(end).getTime()) {
                $("#endTime").tips({
                    side: 3,
                    msg: '结束日期需大于等于开始日期',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#endTime").focus();
                return false;
            }
        }
        // 先停止动画
        //map.carStop();
        var license = $('input[name="imei"]').val();
        var startTime = $('input[name="startTime"]').val();
        var endTime = $('input[name="endTime"]').val();
        $.ajax({
            url: 'deviceLocation/list',
            data: {imei: imei, startTime: startTime, endTime: endTime},
            success: function (data) {
                if (data.code == 200) {
                    dataMap = data.data;
                    if (JSON.stringify(dataMap) === "{}") {
                        alert("该设备号暂无轨迹");
                    } else {
                        var content = "";
                        var index = 1
                        $.each(data.data, function (key, values) {
                            content += "<tr data-key='" + key + "' onclick='contentCli(this)' ";
                            if (index == 1) {
                                content += "style='color: blue'"
                            }
                            content += " class='contentCla'>";
                            content += "<td>" + index + "</td>"
                            content += "<td>" + key + "</td>";
                            content += "<td>" + values.length + "</td></tr>";
                            if (index == 1) {
                                var contentItem = "";
                                $.each(dataMap, function (key1, values1) {
                                    if (key == key1) {
                                        lineArr = []
                                        lists = values1;
                                        $.each(values1, function (index, data) {
                                            lineArr.push(new AMap.LngLat(data.lon, data.lat));
                                            contentItem += "<tr>";
                                            contentItem += "<td>" + data.addr + "</td>";
                                            contentItem += "<td>" + data.timeStr.substr(data.timeStr.lastIndexOf(" ")) + "</td></tr>";
                                        });
                                        setTrackReplay()
                                    }
                                });
                                $("#contentItem").html(contentItem)
                                $("#start").css("display", "block")
                                $("#pause").css("display", "none")
                                $("#resume").css("display", "none")
                            }
                            index++;
                        });
                        $("#content").html(content);
                        if (index <= 1) {
                            lineArr = [];
                        }
                    }
                } else {
                    alert(data.msg);
                }
            }
        });
    }

    function setTrackReplay() {
        // 清除之前的覆盖物
        map.clearMap();
        init(lists[0].lon, lists[0].lat);
    }

    function contentCli(obj) {
        $(".contentCla").css("color", "black");
        $(obj).css("color", "blue");
        var dataKey = $(obj).attr("data-key");
        var contentItem = "";
        $.each(dataMap, function (key, values) {
            if (dataKey == key) {
                lineArr = []
                lists = values;
                $.each(values, function (index, data) {
                    lineArr.push(new AMap.LngLat(data.lon, data.lat));
                    contentItem += "<tr>";
                    contentItem += "<td>" + data.addr + "</td>";
                    contentItem += "<td>" + data.timeStr.substr(data.timeStr.lastIndexOf(" ")) + "</td></tr>";
                });
                setTrackReplay()
            }
        });
        $("#contentItem").html(contentItem)
        $("#start").css("display", "block")
        $("#pause").css("display", "none")
        $("#resume").css("display", "none")
    }
</script>
</body>
</html>
